<!--  -->
<template>
  <div>
    <div class="map" ref="projectMap" style="width: 600px; height: 400px"></div>
    <div id="main"></div>
  </div>
</template>

<script>
import $ from "jquery";
// import szmap from "echarts/map/szmap.svg";
import cqmap from "@/assets/map.json";
import mapbg from "@/assets/map-bg.png";
function randomData() {
  return Math.round(Math.random() * 1000);
}
export default {
  props: {},
  components: {},
  data() {
    return {
      resData: {},
      mapPopData: [
        { name: "罗湖区", value: randomData(), num: 2 },
        { name: "福田区", value: randomData(), num: 20 },
        { name: "南山区", value: randomData(), num: 12 },
        { name: "龙华区", value: randomData(), num: 20 },
        { name: "宝安区", value: randomData(), num: 50 },
        { name: "坪山区", value: randomData(), num: 26 },
        { name: "龙岗区", value: randomData(), num: 22 },
        { name: "城口县", value: randomData(), num: 25 },
        { name: "大鹏新区", value: randomData(), num: 23 },
        { name: "光明区", value: randomData(), num: 96 },
        { name: "盐田区", value: randomData(), num: 220 },
      ],
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.echartsInit();
    });
  },
  methods: {
    findElem(arrayToSearch, attr, val) {
      if (arrayToSearch != null) {
        for (var i = 0; i < arrayToSearch.length; i++) {
          // eslint-disable-next-line eqeqeq
          if (arrayToSearch[i][attr] == val) {
            return i;
          }
        }
      } else {
        return -1;
      }
      return -1;
    },
    echartsInit() {
      const convertData = () => {
        const data = cqmap.features.map((item) => {
          // debugger;
          const { name, adcode } = item.properties;

          let hoverObj = {};

          const objIndex = this.findElem(this.mapPopData, "name", name);
          if (objIndex !== -1) {
            hoverObj = this.mapPopData[objIndex];
          } else {
            hoverObj = null;
          }
          return {
            name,
            mapProperty: item.properties,
            hoverObj: hoverObj,
          };
        });
        console.log(data, "data");
        var res = [];
        for (var i = 0; i < data.length; i++) {
          const mapData = data[i].hoverObj;
          const center = data[i].mapProperty.center;

          if (center && mapData) {
            res.push({
              name: mapData.name,
              value: center.concat(mapData.num),
            });
          }
        }
        console.log(res, "res");
        return res;
      };
      // 使用ref代替document.getElementById
      const echartsDom = this.$refs.projectMap;
      if (echartsDom) {
        const myChart = window.echarts.init(echartsDom);
        window.echarts.registerMap("CQ", cqmap);
        const options = {
          // tooltip: {
          //   trigger: "item",
          //   padding: 0,
          //   borderWidth: 0,
          //   borderColor: "#FFFFFF",
          //   backgroundColor: "#FFFFFF",
          // },
          geo: {
            map: "CQ",
            type: "map",
            layoutCenter: ["50%", "50%"],
            layoutSize: "150%",
            zoom: 0.65,
            roam: false,
            itemStyle: {
              normal: {
                borderColor: "#AEF3FF",
                borderWidth: 2,
                areaColor: {
                  image: mapbg,
                  repeat: "repeat",
                },
                shadowColor: "rgba(13, 110, 191, 0.5)",
                shadowOffsetX: 3,
                shadowOffsetY: 3,
              },
            },
          },
          series: [
            {
              type: "map",
              // type: "custom",
              coordinateSystem: "geo",
              // geoIndex: 0,
              // zlevel: 1,
              // map: "广州市",
              mapType: "CQ",
              zoom: 0.65,
              animationDuration: 1200,
              select: {
                label: { color: "#FFFFFF", fontSize: 12, fontWeight: 400 },
                itemStyle: { color: null },
              },
              itemStyle: {
                normal: {
                  borderColor: "#AEF3FF",
                  borderWidth: 2,
                  areaColor: {
                    image: mapbg,
                    repeat: "repeat",
                  },
                },
              },
              label: {
                show: true,
                color: "#FFFFFF",
                fontSize: 12,
                fontWeight: 400,
              },
              emphasis: {
                label: {
                  show: true,
                  color: "#FFFFFF",
                  fontSize: 15,
                  fontWeight: 600,
                },
                itemStyle: {
                  areaColor: "rgba(102, 182, 255, 0.7)",
                  borderColor: "#FFFFFF",
                  borderWidth: 2,
                },
              },
              layoutCenter: ["50%", "50%"],
              layoutSize: "150%",
              data: this.mapPopData,
              renderItem(params, api) {
                console.log(api, "api");
                const coord = api.coord([
                  api.value(0, params.dataIndex),
                  api.value(1, params.dataIndex),
                ]);
                const circles = [];
                for (let i = 0; i < 5; i++) {
                  circles.push({
                    type: "circle",
                    shape: {
                      cx: 0,
                      cy: 0,
                      r: 30,
                    },
                    style: {
                      stroke: "red",
                      fill: "none",
                      lineWidth: 4,
                    },
                    // Ripple animation
                    keyframeAnimation: {
                      duration: 4000,
                      loop: true,
                      delay: (-i / 4) * 4000,
                      keyframes: [
                        {
                          percent: 0,
                          scaleX: 0,
                          scaleY: 0,
                          style: {
                            opacity: 1,
                          },
                        },
                        {
                          percent: 1,
                          scaleX: 1,
                          scaleY: 1,
                          style: {
                            opacity: 0,
                          },
                        },
                      ],
                    },
                  });
                }
                return {
                  type: "group",
                  x: coord[0],
                  y: coord[1],
                  children: [...circles],
                };
              },
            },
            // {
            //   type: "effectScatter",
            //   coordinateSystem: "geo",
            //   show: false,
            //   symbol:
            //     "image://",
            //   symbolSize: [16, 16],
            //   // symbolOffset: [],
            //   label: {
            //     normal: {
            //       show: true,
            //       offset: [0, -18],
            //       textStyle: {
            //         color: "#fff",
            //         fontSize: 12,
            //         fontWeight: 500,
            //       },
            //       formatter(value) {
            //         return "{a|" + value.data.value[2] + "}";
            //       },
            //       rich: {
            //         a: {
            //           color: "#FFFFFF",
            //           backgroundColor: "#06406A",
            //           width: 28,
            //           height: 16,
            //           lineHeight: 16,
            //           align: "center",
            //           borderWidth: 1,
            //           borderColor: "#79D6FE",
            //           borderRadius: 2,
            //           padding: [0, 4, 0, 4],
            //         },
            //       },
            //     },
            //   },
            //   itemStyle: {
            //     normal: {
            //       color: "rgba(255, 178, 76, 1)",
            //     },
            //   },
            //   data: convertData(),
            //   showEffectOn: "render",
            //   rippleEffect: {
            //     brushType: "stroke",
            //   },
            //   hoverAnimation: true,
            //   zlevel: 9,
            // },
          ],
        };
        myChart.setOption(options);
        myChart.on("click", this.handleClick);
      }
    },
    randomData() {
      return Math.round(Math.random() * 1000);
    },
    handleClick(params) {
      console.log(params, "params");
    },
  },
};
</script>
<style lang="scss" scoped>
.map {
  background: #abcdef57;
  width: 300px;
}
</style>
